import { Button, Form, Input, InputNumber, Select } from 'antd';
import React, { useState } from 'react';
import WangEditor from '@/pages/component/richText/index';
const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

/* eslint-disable no-template-curly-in-string */
const validateMessages = {
  required: '${label} is required!',
  types: {
    email: '${label} is not a valid email!',
    number: '${label} is not a valid number!',
  },
  number: {
    range: '${label} must be between ${min} and ${max}',
  },
};
/* eslint-enable no-template-curly-in-string */

const App: React.FC = () => {
  const onFinish = (values: any) => {
    console.log(values, 'vaue');
  };
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };
  const [options] = useState([
    { label: '小明', value: 1 },
    { label: '小红', value: 2 },
  ]);
  return (
    <Form
      {...layout}
      name="nest-messages"
      onFinish={onFinish}
      validateMessages={validateMessages}
    >
      <Form.Item
        name="name"
        label="分类选择"
        rules={[{ type: 'number', min: 0, max: 99 }]}
      >
        <Select
          style={{ width: 200 }}
          onChange={handleChange}
          options={options}
        />
      </Form.Item>

      <Form.Item name="edit" label="商品详情" style={{height:"400px"}} wrapperCol={{ span: 12 }}>
        <WangEditor></WangEditor>
      </Form.Item>
      <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default App;
